<!--
 * @Description: 限时抢购活动管理组件
 * @Author: [您的名字]
 * @Date: [创建日期]
 * @LastEditors: [最后编辑者]
 * @LastEditTime: [最后编辑时间]
 * @Features: 
 *  1. 活动列表展示
 *  2. 活动状态管理
 *  3. 活动搜索功能
 *  4. 新增活动
 *  5. 活动详情查看
 *  6. 活动取消操作
-->
<template>
  <!-- 限时抢购活动主容器 -->
  <div class="timesale-container">
    <!-- 卡片容器 -->
    <el-card shadow="never">
      <!-- 卡片头部：标题和新增按钮 -->
      <div slot="header" class="clearfix">
        <span>限时抢购活动列表</span>
        <el-button style="float: right; margin-top: -5px" type="primary" @click="handleCreate">
          新增活动
        </el-button>
      </div>

      <!-- 搜索表单 -->
      <el-form :inline="true" :model="queryTimeSaleParam" class="demo-form-inline">
        <!-- 活动名称搜索 -->
        <el-form-item label="活动名称">
          <el-input v-model="queryTimeSaleParam.saleName" placeholder="请输入活动名称"></el-input>
        </el-form-item>
        <!-- 活动状态筛选 -->
        <el-form-item label="活动状态">
          <el-select v-model="queryTimeSaleParam.saleStatus" placeholder="请选择活动状态">
            <el-option :label="status.statusName" :value="status.statusId" v-for="status in statusList" :key="status.statusId"></el-option>
          </el-select>
        </el-form-item>
        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="queryTimeSaleByCondition">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 活动列表表格 -->
      <el-table :data="activityList" stripe border fit highlight-current-row max-height="500">
        <el-table-column prop="saleId" label="活动ID" width="80"></el-table-column>
        <el-table-column prop="saleName" label="活动名称" width="400"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column label="活动状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.saleStatus)">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button type="text" @click="handleView(scope.row.saleId, scope.row.saleStatus)">活动详情</el-button>
            <el-button 
              type="text" 
              class="text-danger" 
              v-if="scope.row.saleStatus === 1 || scope.row.saleStatus === 2" 
              @click="handleCancel(scope.row.saleId, scope.$index)">
              取消活动
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParam.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
/**
 * @description 限时抢购活动管理组件
 */
export default {
  name: 'TimeSale',

  /**
   * @description 组件数据
   * @return {Object}
   */
  data() {
    return {
      activityList: [], // 活动列表数据
      queryTimeSaleParam: { // 查询参数
        saleName: '', // 活动名称
        saleStatus: '' // 活动状态
      },
      pageParam: { // 分页参数
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页条数
        param: {} // 查询条件
      },
      total: 0, // 总记录数
      statusList: [] // 状态列表
    }
  },

  /**
   * @description 组件创建时的生命周期钩子
   */
  created() {
    this.queryStatusList() // 获取状态列表
    this.fetchList() // 获取活动列表
  },

  methods: {
    /**
     * @description 获取活动列表数据
     */
    fetchList() {
      this.$axios.post('api/timesale/queryTimeSaleList', this.pageParam).then(resp => {
        if (resp.data.code === 200) {
          this.activityList = resp.data.data.list
          this.total = resp.data.data.total
        } else {
          this.$message.error('获取活动列表失败，错误码：' + resp.data.code)
        }
      }).catch(err => {
        this.$message.error('获取活动列表失败，错误信息：' + err.message)
      })
    },

    /**
     * @description 根据活动状态获取对应的标签类型
     * @param {number} status - 活动状态码
     * @return {string} 对应的标签类型
     */
    getStatusType(status) {
      // 根据状态码返回对应的标签类型
      // 0: 未开始, 1: 进行中, 2: 已结束, 3: 已取消
      const typeMap = {
        1: 'default',
        2: 'success',
        3: 'info',
        4: 'danger'
      }
      return typeMap[status] || 'default'
    },

    /**
     * @description 查看活动详情
     * @param {number} id - 活动ID
     * @param {number} saleStatus - 活动状态
     */
    handleView(id, saleStatus) {
      this.$router.push({ name: 'timesaleItem-view', query: { 'saleId': id, 'saleStatus': saleStatus } })
    },

    /**
     * @description 创建新活动
     */
    handleCreate() {
      this.$router.push({ name: 'timesaleItem-create' })
    },

    /**
     * @description 取消活动
     * @param {number} id - 活动ID
     * @param {number} index - 活动在列表中的索引
     */
   

    handleCancel(id) {

      this.$confirm('确定要取消这个活动吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求取消活动
        this.$axios.get('api/timesale/cancelTimeSale?saleId=' + id).then(resp => {
          if (resp.data.code === 200) {
            this.$message({
              type: 'success',
              message: '活动取消成功'
            })
            this.fetchList()
          } else {
            this.$message.error('取消活动失败，错误码：' + resp.data.code)
          }
        }).catch(err => {
          this.$message.error('取消活动失败，错误信息：' + err.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },

    /**
     * @description 处理每页显示条数变化
     * @param {number} val - 新的每页条数
     */
    handleSizeChange(val) {
      this.pageParam.pageSize = val
      this.fetchList()
    },

    /**
     * @description 处理页码变化
     * @param {number} val - 新的页码
     */
    handleCurrentChange(val) {
      this.pageParam.pageNum = val
      this.fetchList()
    },

    /**
     * @description 重置查询条件
     */
    resetQuery() {
      this.pageParam = {
        pageNum: 1,
        pageSize: 10,
        param: {}
      }
      this.queryTimeSaleParam = {
        saleName: '',
        saleStatus: ''
      }
      this.fetchList()
    },

    /**
     * @description 获取活动状态列表
     */
    queryStatusList() {
      this.$axios.get('api/timesale/queryStatusList').then(resp => {
        if (resp.data.code === 200) {
          this.statusList = resp.data.data
        } else {
          this.$message.error('获取活动列表失败，错误码：' + resp.data.code)
        }
      }).catch(err => {
        this.$message.error('获取活动状态列表失败，错误信息：' + err.message)
      })
    },

    /**
     * @description 根据条件查询活动列表
     */
    queryTimeSaleByCondition() {
      this.pageParam.param = this.queryTimeSaleParam
      this.$axios.post('api/timesale/queryTimeSaleByCondition', this.pageParam).then(resp => {
        if (resp.data.code === 200) {
          this.activityList = resp.data.data.list
          this.total = resp.data.data.total
        } else {
          this.$message.error('获取活动列表失败，错误码：' + resp.data.code)
        }
      }).catch(err => {
        this.$message.error('获取活动列表失败，错误信息：' + err.message)
      })
    }
  }
}
</script>

<style scoped>
/* 分页容器样式 */
.pagination-container {
  padding: 15px;
  text-align: right;
}

/* 危险操作按钮样式 */
.text-danger {
  color: #f56c6c;
}

/* 危险操作按钮悬停样式 */
.text-danger:hover {
  color: #f89898;
}
</style>  